import React, { PureComponent } from "react"
import { connect } from "react-redux"
import Swiper from "@/components/main/index/section/swiper"
import { FloorShowStyle } from "@/components/main/index/section/styled"
import { loadFloorShowAsync } from "@/components/main/index/actionCreator"

class FloorShow extends PureComponent {


    render() {
        // console.log(this.props.floorShowData.toJS());
        console.log(this.props.floorShowData);

        return this.props.floorShowData.length !== 0 ? (

            <FloorShowStyle>
                {
                    this.props.floorShowData.map((item, index) => (
                        <div key={index}>
                            <p className="title_h1">{item.title}</p>
                            <div className="first_show">
                                <div className="first_show_img">
                                    <img src={item.list[0].pic} alt="" style={{ width: "100%", height: "auto" }} />
                                </div>
                                <div className="first_show_introduce">
                                    <p><span className="show_time">{item.list[0].date}</span><span>{item.list[0].week}</span></p>
                                    <p>{item.list[0].schedular_name}</p>
                                    <p><span>{item.list[0].city_name}</span>|<span>{item.list[0].venue_name}</span></p>
                                </div>
                            </div>
                            {
                                <Swiper height={"220px"} swiperConfig={{ slidesPerView: 3 }}>
                                    {
                                        item.list.slice(1).map((it, dex) => (
                                            <div className="swiper-slide" key={dex} >
                                                <img src={it.pic} style={{ height: "145px", width: "106px" }} alt="" />
                                                <p>{it.schedular_nam}</p>
                                            </div>
                                        ))
                                    }
                                </Swiper>
                            }
                        </div>
                    ))
                }
            </FloorShowStyle>
        ) : (null)
    }
    componentDidMount() {
        this.props.pageInit.bind(this)()
    }
}
const mapStateToProps = (state) => {
    return {
        currentCity: state.getIn(['indexReducer', 'currentCity']).toJS(),
        floorShowData: state.getIn(["indexReducer", "floorShowData"]).toJS()
    }
}
const mapDispatchToProps = (dispatch) => ({
    pageInit() {
        dispatch(loadFloorShowAsync(dispatch, this.props.currentCity.city_id))
    },

})
export default connect(mapStateToProps, mapDispatchToProps)(FloorShow)



